<keira-top-bar [handler]="handlerService"></keira-top-bar>

<div class="container-fluid">
  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">
    <div class="content-block">
      <keira-query-output
        [docUrl]="docUrl"
        [editorService]="editorService"
        (executeQuery)="editorService.save($event)"
      ></keira-query-output>
    </div>

    <div class="content-block">
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="CreatureID">CreatureID</label>
            <input [formControlName]="'CreatureID'" id="CreatureID" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ItemID1">
              <keira-icon [itemId]="editorService.form.controls.ItemID1.value"></keira-icon>
              ItemID1
            </label>
            <keira-item-selector-btn
              [control]="editorService.form.controls.ItemID1"
              [config]="{ name: 'ItemID1' }"
            ></keira-item-selector-btn>
            <input [formControlName]="'ItemID1'" id="ItemID1" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ItemID2">
              <keira-icon [itemId]="editorService.form.controls.ItemID2.value"></keira-icon>
              ItemID2
            </label>
            <keira-item-selector-btn
              [control]="editorService.form.controls.ItemID2"
              [config]="{ name: 'ItemID2' }"
            ></keira-item-selector-btn>
            <input [formControlName]="'ItemID2'" id="ItemID2" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ItemID3">
              <keira-icon [itemId]="editorService.form.controls.ItemID3.value"></keira-icon>
              ItemID3
            </label>
            <keira-item-selector-btn
              [control]="editorService.form.controls.ItemID3"
              [config]="{ name: 'ItemID3' }"
            ></keira-item-selector-btn>
            <input [formControlName]="'ItemID3'" id="ItemID3" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
